<template>
  <div class="department">
    <!-- 搜索组件 -->
    <PageSearch @newSearchEvent="handlerSearch" :searchFormConfig="searchFormConfig" />

    <!-- 数据展示区域 -->
    <PageTable ref="pageTableRef" :pageTabelConfig="pageTabelConfig" @pageTableEvent="handlerDialog" @showEmptyDialog="handlerDialog" page-name="Department" />

    <!-- 对话框区域 -->
    <PageDialog page-name="Department" ref="pageDialogRef" :editDialogFormConfig="editDialogFormConfig" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
import PageTable from "@/components/page-table"
import { pageTabelConfig } from "./config/tabel.config"

import PageSearch from "@/components/page-search"
import { searchFormConfig } from "./config/search.config"

import { handlerSearch, pageTableRef } from "@/hook/usePageSearch"

import PageDialog from "@/components/page-dialog"
import { editDialogFormConfig } from "./config/editDialog.config"
import { handlerDialog, pageDialogRef } from "@/hook/usePageDialog"
export default defineComponent({
  name: "department",
  components: {
    PageTable,
    PageSearch,
    PageDialog,
  },
  setup() {
    return {
      pageTabelConfig,
      searchFormConfig,
      pageTableRef,
      handlerSearch,
      editDialogFormConfig,
      pageDialogRef,
      handlerDialog,
    }
  },
})
</script>

<style scoped></style>
